<template>
	<view class="flex p-1015">
		<text style="font-weight: 500;font-size: 1.2em;padding: 10px;">图形化数据:</text>
		<uni-segmented-control :current="current" :values="items" style="padding: 10px; width: 500px;" style-type="text"
			active-color="blue" @clickItem="changetabs" />
		<view style="width: 100%;">
			<view v-if="current === 1">
				<qiun-data-charts type="column" :ontouch="true" :opts="columnopts" :chartData="chartRef" />
			</view>
			<view v-if="current === 0">
				<qiun-data-charts type="line" :ontouch="true" :opts="lineopts" :chartData="chartRef" />
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @description 全端通用图表
	 */
	export default {
		data() {
			return {
				value: -1,
				loading: false,
				items: ['条形图','柱状图' ],
				current: 0,
				chartRef: null,
				columnopts: {
					color: ["#1C1C1C", "#A1C6D9", "#C2C9F6", "#73C0DE", "#96E2CC", "#FFE7A0", "#B4ECC0"],
					padding: [15, 15, 10, 5],
					enableScroll:true,
					legend: {
						position:'left'
					},	
					xAxis: {
						itemCount:3,
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
				},
				lineopts: {
					color: ["#1C1C1C", "#A1C6D9", "#C2C9F6", "#73C0DE", "#96E2CC", "#FFE7A0", "#B4ECC0"],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {
						position:'left'
					},	
					xAxis: {
						itemCount:5,
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						data: [{
							min: 0
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},

			}
		},
		props: {
			chartdate: {
				type: Object,
				required: true
			},
			headtitle: {
				type: Object,
			},
		},
		methods: {
			updateData() {
				setTimeout(() => {
					let res = {
						categories: this.chartdate[11],
						series: [
							// {
							// 	name: "温度",
							// 	data: this.chartdate[0]
							// },
							// {
							// 	name: "湿度",
							// 	data: this.chartdate[1]
							// },
							// {
							// 	name: "光强",
							// 	data: this.chartdate[2]
							// },
						]
					};
					
					for(var i=0 ;i<3;i++)
					{
						res.series.push({
							name: this.headtitle[i].f_name,
							data: this.chartdate[i]
						});
					}
					this.chartRef = JSON.parse(JSON.stringify(res));
				}, 100);
			},
			changetabs(e) {
				this.current = e.currentIndex;
			}
		}
	}
</script>

<style>
</style>